<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/common.css">
<style>
    #workOrderIndex {
        color: #444;
        background: #fff;
        padding-bottom: 30px;
        font-size: 12px;
    }


    .sum-reset-button {
        margin-right: 20px;
    }

    .reject-reason-item {
        width: 140px;
        margin-right: 14px;
    }

    .sum-edit-cancel {
        color: #848089;
        cursor: pointer;
    }

    .theme-cursor {
        color: #6E3DC8;
        cursor: pointer;
    }

    body .table-image {
        border-radius: 15px;
        width: 30px;
        height: 30px;
        overflow: hidden;
        border: 1px solid #e6e6e6;
    }

    .sum-refresh-button {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .create-btn {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .sum-screen-item-vague .sum-screen-condition {
        width: 242px;
    }

    .sum-screen-item-vague .el-select {
        width: 100px;
    }

    .color-ED655F {
        color: #ED655F;
    }

    .theme-cursor {
        color: #6E3DC8;
        cursor: pointer;
    }

    .color-999 {
        color: #999;
    }

    .color-0ACE97 {
        color: #0ACE97;
    }

    .popover-container .table-image-identity {
        width: 100px;
        height: 60px;
        border-radius: 4px;
    }

    .unit-tip-item {
        color: #626066;
        font-size: 12px;
        margin-left: 6px;
        line-height: 18px;
    }

    .nice-validator .el-input__inner {
        vertical-align: baseline !important;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/sum/libs/vue.js"></script>
<script src="__CDN__/assets/addons/sum/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/sum/libs/moment.js"></script>

<div id="workOrderIndex" v-cloak>
    <div class="sum-tabs-container">
        <el-tabs v-model="searchForm.status" @tab-click="tabshandleClick">
            <el-tab-pane v-for="tabs in tabsList" :label="tabs.label" :name="tabs.name"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="sum-screen-container">
        <div class="sum-button sum-refresh-button" @click="getListData">
            <i class="el-icon-refresh"></i>
        </div>

        {if condition = "$auth->check('oil/work_order/add')"}
        <div class="sum-button create-btn" @click="operation('create',null)"><i class="el-icon-plus"></i>新建工单</div>
        {/if}

        <div class="display-flex sum-screen-item sum-screen-item-vague">
            <div class="sum-screen-condition">
                <el-input placeholder="请输入内容" v-model="searchForm.form_1_value" class="input-with-select" size="small">
                    <el-select v-model="searchForm.form_1_key" slot="prepend" placeholder="请选择">
                        <el-option label="手机号" value="user_phone"></el-option>
                        <el-option label="油票号" value="order_sn"></el-option>
                    </el-select>
                </el-input>
            </div>
        </div>

        <div class="display-flex sum-screen-item">
            <div class="sum-screen-tip">协助部门</div>
            <div class="sum-screen-condition">
                <el-select v-model="searchForm.need_departments" placeholder="请选择" size="small">
                    <el-option v-for="item in needDepartmentOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="display-flex sum-screen-item">
            <div class="sum-screen-tip">登记时间</div>
            <div>
                <el-date-picker v-model="searchForm.visittime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                                size="small" format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="display-flex sum-screen-item-button">

            <div class="sum-button sum-reset-button" @click="goExport('export')">工单导出</div>

            <div class="sum-button sum-reset-button" @click="screenEmpty">重置</div>
            <div class="sum-button sum-screen-button" @click="handleCurrentChange(1)">筛选</div>


        </div>
    </div>
    <div class="sum-table-container" v-loading="isAjaxtable">
        <el-table :data="listData" border stripe
                  :row-class-name="tableRowClassName"
                  :cell-class-name="tableCellClassName"
                  :header-cell-class-name="tableCellClassName"
        >
            <el-table-column label="ID" prop="id" width="70">
            </el-table-column>
            <el-table-column label="用户账号电话" min-width="180">
                <template slot-scope="scope">
                    <div class="ellipsis-item-1">
                        {{scope.row.user_phone}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="加油票订单号" min-width="180">
                <template slot-scope="scope">
                    <div class="ellipsis-item-1">
                        {{scope.row.order_sn}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="协助部门处理" min-width="180">
                <template slot-scope="scope">
                    <div class="ellipsis-item-1">
                        {{ getDepartmentLabels(scope.row.need_departments) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="工单状态" min-width="180">
                <template slot-scope="scope">
                    <div class="display-flex">
                            <span v-if="scope.row.status==1" class="display-flex">
                                <span class="sum-status-dot sum-status-normal-dot"></span>
                                <span class="sum-status-normal">已处理</span>
                            </span>
                        <span v-else-if="scope.row.status==0" class="display-flex">
                                <span class="sum-status-dot sum-status-default-dot"></span>
                                <span class="sum-status-default">待处理</span>
                            </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="登记时间" width="150">
                <template slot-scope="scope">
                    <div :class="{'color-ED655F': isLate(scope.row)}">
                        {{moment(scope.row.visittime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="回复/处理时间" min-width="180">
                <template slot-scope="scope">
                    <div class="ellipsis-item-1">
                        {{scope.row.huifu_hour}}小时
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="80">
                <template slot-scope="scope">
                    <div class="theme-cursor" @click="operation('edit',scope.row.id)">
                        详情
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="sum-pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                       :total="totalPage">
        </el-pagination>
    </div>
</div>